<template>
  <div>
    <el-collapse v-model='activeNames'>
      <el-collapse-item title='通用属性' name='1'>
        <el-form :model='form' label-width='80px' label-position='left'>
          <el-form-item label='宽度'>
            <el-input-number
              v-model='form.width'
              :min='800'
              :max='2000'
              size='small'
              controls-position='right'
              @change='handleFormChange'
            ></el-input-number>
          </el-form-item>
          <el-form-item label='高度'>
            <el-input-number
              v-model='form.height'
              :min='800'
              :max='2000'
              size='small'
              controls-position='right'
              @change='handleFormChange'
            ></el-input-number>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title='网格' name='2'>
        <el-form :model='form' label-width='80px'>
          <el-form-item label='网格类型'>
            <el-select
              v-model='form.gridType'
              placeholder='请选择'
              @change='handleFormChange'
            >
              <el-option label='Dot' value='dot'></el-option>
              <el-option label='Fixed Dot' value='fixedDot'></el-option>
              <el-option label='Mesh' value='mesh'></el-option>
              <el-option label='Double Mesh' value='doubleMesh'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label='网格大小'>
            <el-input-number
              v-model='form.gridSize'
              :min='1'
              :max='20'
              size='small'
              controls-position='right'
              @change='handleFormChange'
            ></el-input-number>
          </el-form-item>
          <el-form-item label='网格颜色'>
            <el-color-picker show-alpha v-model="form.gridColor" @change="handleFormChange"></el-color-picker>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title='背景' name='3'>
        <el-form :model='form' label-width='80px'>
          <el-form-item label='背景颜色'>
            <el-color-picker show-alpha v-model="form.backgroundColor" @change="handleFormChange"></el-color-picker>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: 'GraphPropertyPanel',
  data() {
    return {
      activeNames: ['1', '2', '3'],
      form: {
        width: 800,
        height: 800,
        gridType: 'dot',
        gridSize: 5,
        gridColor: '#a0a0a0',
        backgroundColor: '#333b50'
      }
    }
  },
  watch: {
    '$store.state.graphModule.operateNode': function(newVal) {
      if (!newVal) {
        this.refreshPanel()
      }
    }
  },
  methods: {
    refreshPanel() {
      const graph = this.$store.state.graphModule.graph
      const graphOptions = this.$store.state.graphModule.graphOptions
      this.form.width = graph.options.width
      this.form.height = graph.options.height
      this.form.gridType = graphOptions.grid.type
      this.form.gridSize = graph.getGridSize()
      this.form.gridColor = graphOptions.grid.args.color
      this.form.backgroundColor = graphOptions.background.color
    },

    handleFormChange() {
      const graph = this.$store.state.graphModule.graph
      graph.resizeGraph(this.form.width, this.form.height)
      graph.setGridSize(this.form.gridSize)
      graph.drawGrid({
        type: this.form.gridType,
        args: {
          color: this.form.gridColor
        }
      })
      graph.drawBackground({
        color: this.form.backgroundColor
      })
      graph.positionPoint({ x: 0, y: 0 }, 0, 0)

      this.$store.commit('updateGraphGridOption', {
        type: this.form.gridType,
        color: this.form.gridColor
      })
      this.$store.commit('updateGraphBackgroundOption', this.form.backgroundColor)
    }
  }
}
</script>

<style scoped>
.el-input-number {
    width: 100px;
    line-height: 26px
} 

.el-form-item {
    margin-bottom: 2px;
}

.el-collapse {
    border: 3px solid #EBEEF5;
    padding: 5px;
}
</style>